#router {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}
.router-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100vw;
  height: 100%;
}

.forward-enter {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;

  transform: translateX(100%);
}

.forward-enter-active {
  transition: all 500ms;
  transform: translateX(0);
}

.forward-exit {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;

  transform: translateX(0);
}

.forward-exit-active {
  transition: all 500ms;
  transform: translateX(-100%);
}

.back-enter {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;

  transform: translateX(-100%);
}

.back-enter-active {
  transition: all 500ms;
  transform: translateX(0);
}

.back-exit {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 100%;

  transform: translateX(0);
}

.back-exit-active {
  transition: all 500ms;
  transform: translateX(100%);
}
